<template>
    <div class="edit-opt">
        <a-tooltip placement="left">
            <template #title>{{ pState.showRuler ? '隐藏规尺' : '显示规尺' }}</template>
            <a-button type="text" class="opt-btn" @click="pState.showRuler = !pState.showRuler">
                <Iconify :icon="pState.showRuler ? 'mdi:ruler' : 'mdi:ruler-off'"
                    :class="{ 'text-primary': pState.showRuler }" />
            </a-button>
        </a-tooltip>

        <a-tooltip placement="left">
            <template #title>{{ pState.isShowReferLine ? '隐藏辅助线' : '显示辅助线' }}</template>
            <a-button type="text" class="opt-btn" @click="pState.isShowReferLine = !pState.isShowReferLine">
                <Iconify icon="mdi:grid" :class="{ 'text-primary': pState.isShowReferLine }" />
            </a-button>
        </a-tooltip>

        <a-tooltip placement="left">
            <template #title>{{ pState.lockLine ? '解锁参考线' : '锁定参考线' }}</template>
            <a-button type="text" class="opt-btn" @click="pState.lockLine = !pState.lockLine">
                <Iconify :icon="pState.lockLine ? 'mdi:lock' : 'mdi:lock-open'"
                    :class="{ 'text-primary': pState.lockLine }" />
            </a-button>
        </a-tooltip>

        <a-tooltip placement="left">
            <template #title>还原</template>
            <a-button type="text" class="opt-btn" @click="resetMethod">
                <Iconify icon="mdi:restore" />
            </a-button>
        </a-tooltip>

        <a-tooltip placement="left">
            <template #title>缩小</template>
            <a-button type="text" class="opt-btn" @click="zoomOutMethod">
                <Iconify icon="mdi:magnify-minus" />
            </a-button>
        </a-tooltip>
    </div>
</template>

<script setup lang="ts">
const props = withDefaults(defineProps<{
    pState:any
}>(),{})

const emits = defineEmits<{
    (e:'resetMethod'):void,
    (e:'zoomOutMethod'):void,
}>()

const resetMethod = () => {
    emits('resetMethod')
}

const zoomOutMethod = () => {
    emits('zoomOutMethod')
}
</script>

<style lang="scss" scoped>
.edit-opt {
    position: absolute;
    right: 16px;
    top: 85%;
    transform: translateY(-50%);
    z-index: 999;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 8px;
    background: var(--color-bg-2);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    gap: 4px;
    
    .opt-btn {
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
        
        &:hover {
            background: var(--color-fill-2);
            border-radius: 4px;
        }
    }
}
</style>